<template>
	<view class="theme-setting">
		<view>
			选择主题颜色
		</view>

		<view class="theme-type">
			<view :class="['theme-type-item',activeType===item?'active':'']" @tap="activeType=item"
				v-for="item in types" :key="item">
				{{item}}
			</view>

		</view>

		<scroll-view scroll-x="true" class="theme-colors">
			<view :class="['theme-color' ,`theme_${themeIndex}`]" @click="changeTheme(themeIndex)"
				v-for="themeIndex in themes[activeType] " :key="themeIndex">
				<view :class="{
					'active-dot':theme===`theme_${themeIndex}`
				}">

				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				types: ['颜色', '图片'],
				activeType: "颜色",
				themes: {
					颜色: 10,
					图片: [101, 102, 103, 104]
				}
			}
		},
		computed: {
			...mapState('taskStore', ['theme']),
		},
		methods: {
			...mapMutations('taskStore', ['setTheme']),
			changeTheme(index) {
				this.setTheme(`theme_${index}`)
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.theme-setting {
		height: max-content;
		padding: 24px 12px 12px 12px;
		background-color: #fff;
		border-radius: $uni-border-radius-lg $uni-border-radius-lg 0 0;

		.theme-type {}
	}

	.theme-colors {
		margin-top: 24upx;
	}

	.theme-color {
		display: inline-block;
		width: 48upx;
		height: 48upx;
		border-radius: 50%;
		position: relative;
		background: var(--theme-bg);
		background-size: contain;

		&:not(:first-child) {
			margin-left: 16upx;
		}

		.active-dot {
			width: 16upx;
			height: 16upx;
			background-color: var(--revert-color);
			position: absolute;
			border-radius: 50%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

		}

	}

	.theme-type {
		display: flex;
		margin-top: 12px;

		.theme-type-item {
			height: 48upx;
			line-height: 48upx;
			padding: 0 12upx;
			border-radius: 28upx;
			border: 4upx solid var(--theme-color);
			font-size: $uni-font-size-sm;

			&.active {
				background-color: var(--theme-color);
				color: #fff;
			}

			&:not(:first-child) {
				margin-left: 8px;
			}
		}
	}
</style>